<template>
	<view class="root">
		<view class="br-20 oh" :style="{ margin: `48rpx 20rpx` }">
			<view
				v-for="(item, index) in people.list"
				:key="index"
				class="fd-row bgc-fff mb-2"
				:style="{ padding: `20rpx` }"
			>
				<image
					class="br-circle bgc-eee width-94 height-94"
					:src="item.avatarUrl"
					mode="aspectFill"
				/>

				<view class="jc-sa f1 ml-28">
					<text class="fs-30 fw-700 color-333 ellipsis">{{ item.nickName }}</text>
					<text class="color-999 fs-28">加入时间：{{ item.createtime }}</text>
				</view>
			</view>
			<uni-load-more :status="loadStatus" />
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Pager } from "@/static/type";

	let requestFlag: boolean = false;
	@Component
	export default class Subordinate extends Vue {
		// component property
		people: Pager<AnyObject> = { page: 1, list: [], size: 18 };
		loadStatus: string = "loading";

		onLoad() {
			uni.startPullDownRefresh({});
		}

		onPullDownRefresh() {
			this.people.list = [];
			this.people.page = 1;
			this.getListData();
		}
		onReachBottom() {
			this.getListData();
		}

		getListData() {
			const { $request, people } = this;

			if (requestFlag || !people.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/shop/subordinate", {
					page: people.page,
					size: people.size,
				})
				.then(({ data }) => {
					people.list.push(...data.data);
					people.page = data.current_page < data.last_page ? ++data.current_page : 0;
					this.loadStatus = people.page ? "more" : "noMore";
					this.loadStatus = "noMore";
				})
				.finally(() => {
					requestFlag = false;
					people.page > 1 || uni.stopPullDownRefresh();
				});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>